<template>
  <view class="forget-pwd">
    <!-- 装饰元素 -->
    <view class="decor-circle circle-1"></view>
    <view class="decor-circle circle-2"></view>
    <view class="decor-circle circle-3"></view>
    <view class="decor-dot dot-1"></view>
    <view class="decor-dot dot-2"></view>
    <view class="decor-dot dot-3"></view>
    <view class="decor-line line-1"></view>
    <view class="decor-line line-2"></view>
    
    <view class="title-box">
      <view class="title">忘记密码</view>
      <view class="sub-title">请输入手机号和验证码重置您的密码</view>
    </view>
    
    <view class="input-container">
      <view class="input-item">
        <u-input 
          v-model="mobile" 
          class="input" 
          placeholder="输入手机号码" 
          :border="false"
        />
      </view>
      
      <view class="input-item flex">
        <u-input
          v-model="smsCode"
          class="code-input"
          placeholder="输入验证码"
          :border="false"
        />
        <button
          class="code-btn"
          :class="{ 'code-btn-disabled': mobile.length != 11 }"
          @click="sendSmsFun"
        >
          <u-verification-code
            unique-key="forget-pwd"
            ref="uCode"
            @change="codeChange"
          >
          </u-verification-code>
          <view class="code-text">{{ codeTips }}</view>
        </button>
      </view>
      
      <view class="input-item">
        <u-input 
          type="password" 
          v-model="resetPwd" 
          placeholder="输入新密码" 
          :border="false"
          :password-icon="true"
        />
      </view>
    </view>
    
    <view
      class="submit-btn"
      @click="forgetPwdFun"
      :class="{ 'submit-btn-disabled': disable }"
    >
      重置密码
    </view>
    
    <view class="bottom-link">
      想起密码了？<text class="link" @click="goToLogin">去登录</text>
    </view>
  </view>
</template>

<script>
import { forgetPwd, sendSms } from "@/api/app.js";
import { ACCESS_TOKEN } from "@/config/app.js";
import { SMSType } from "@/utils/type.js";
import { mapMutations } from "vuex";
export default {
  name: "forgetPwd",
  data() {
    return {
      mobile: "",
      smsCode: "",
      resetPwd: "",
      time: 59,
      codeTips: "获取验证码",
    };
  },
  computed: {
    disable() {
      if (this.mobile.length == 11 && this.smsCode && this.resetPwd) {
        return false;
      } else {
        return true;
      }
    },
  },
  methods: {
    ...mapMutations(["login"]),
    codeChange(tip) {
      this.codeTips = tip;
    },
    goToLogin() {
      uni.navigateBack();
    },
    forgetPwdFun() {
      let { mobile, smsCode, resetPwd } = this;
      if (!mobile) {
        this.$toast({
          title: "请填写手机号",
        });
        return;
      }
      if (!smsCode) {
        this.$toast({
          title: "请填写短信验证码",
        });
        return;
      }
      if (!resetPwd) {
        this.$toast({
          title: "请填写重置密码",
        });
        return;
      }
      
      let data = {
        mobile: mobile,
        code: smsCode,
        password: resetPwd,
      };
      forgetPwd(data).then((res) => {
        if (res.code == 1) {
          this.login(data);
          this.$toast({
            title: res.msg,
          });
          //  跳转到登录页
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        }
      });
    },
    sendSmsFun() {
      if (!this.$refs.uCode.canGetCode) return;
      if (!this.mobile) {
        this.$toast({
          title: "请填写手机号信息",
        });
        return;
      }
      sendSms({
        mobile: this.mobile,
        key: SMSType.FINDPWD,
      }).then((res) => {
        if (res.code == 1) {
          this.$toast({ title: res.msg });
          this.$refs.uCode.start();
        }
      });
    },
  },
};
</script>

<style lang="scss">
page {
  padding: 0;
  background-color: white;
  position: relative;
  overflow: hidden;
}

.forget-pwd {
  min-height: 100vh;
  padding: 40rpx;
  position: relative;
  z-index: 1;
  
  // 装饰元素样式
  .decor-circle {
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    opacity: 0.6;
  }
  
  .circle-1 {
    width: 300rpx;
    height: 300rpx;
    background: linear-gradient(135deg, #FFC0CB, #FFB6C1);
    top: -100rpx;
    right: -100rpx;
  }
  
  .circle-2 {
    width: 200rpx;
    height: 200rpx;
    background: linear-gradient(135deg, #FFA5B5, #FF8C9D);
    bottom: 30%;
    left: -80rpx;
  }
  
  .circle-3 {
    width: 150rpx;
    height: 150rpx;
    background: linear-gradient(135deg, #FFC0CB, #FFB6C1);
    bottom: 10%;
    right: -50rpx;
    opacity: 0.4;
  }
  
  .decor-dot {
    position: absolute;
    border-radius: 50%;
    z-index: -1;
  }
  
  .dot-1 {
    width: 20rpx;
    height: 20rpx;
    background-color: #FFC0CB;
    top: 20%;
    left: 15%;
    animation: float 4s ease-in-out infinite;
  }
  
  .dot-2 {
    width: 15rpx;
    height: 15rpx;
    background-color: #FFA5B5;
    top: 40%;
    right: 20%;
    animation: float 5s ease-in-out infinite 1s;
  }
  
  .dot-3 {
    width: 25rpx;
    height: 25rpx;
    background-color: #FF8C9D;
    bottom: 25%;
    right: 30%;
    animation: float 6s ease-in-out infinite 0.5s;
  }
  
  .decor-line {
    position: absolute;
    height: 3rpx;
    background: linear-gradient(90deg, transparent, #FFC0CB, transparent);
    z-index: -1;
    opacity: 0.3;
  }
  
  .line-1 {
    width: 30%;
    top: 30%;
    left: 10%;
    transform: rotate(30deg);
  }
  
  .line-2 {
    width: 40%;
    bottom: 20%;
    right: 5%;
    transform: rotate(-20deg);
  }
  
  .title-box {
    margin-bottom: 80rpx;
    margin-top: 60rpx;
    
    .title {
      font-size: 48rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      color: #333;
    }
    
    .sub-title {
      font-size: 28rpx;
      color: #999;
    }
  }

  .input-container {
    margin-bottom: 60rpx;
    
    .input-item {
      background-color: #f5f5f5;
      border-radius: 40rpx;
      height: 100rpx;
      margin-bottom: 30rpx;
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
      
      .code-input {
        flex: 1;
      }
      
      .code-btn {
        height: 70rpx;
        background: none;
        padding: 0 20rpx;
        color: $-color-primary;
        font-size: 28rpx;
        margin: 0;
        
        &::after {
          border: none;
        }
      }
      
      .code-btn-disabled {
        color: #999;
      }
      
      .code-text {
        font-size: 28rpx;
      }
    }
  }

  .submit-btn {
    width: 100%;
    height: 100rpx;
    background-color: #FFA5B5;
    border-radius: 40rpx;
    color: white;
    font-size: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40rpx;
    box-shadow: 0 10rpx 20rpx rgba(255, 165, 181, 0.3);
    transition: transform 0.2s;
    
    &:active {
      transform: scale(0.98);
    }
  }
  
  .submit-btn-disabled {
    opacity: 0.6;
  }
  
  .bottom-link {
    text-align: center;
    font-size: 28rpx;
    color: #666;
    
    .link {
      color: #ff6b81;
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10rpx);
  }
}
</style>